<link rel="stylesheet" href="${basePath}/resources/common/libs/datetimepicker/css/bootstrap-datetimepicker.min.css"/>
<section class="content-header">
	<h1>
		动态监测
		<small>列表</small>
	</h1>
	<ol class="breadcrumb">
		<li><a href="${basePath}"><i class="fa fa-dashboard"></i> 首页</a></li>
		<li><a href="#">系统管理</a></li>
		<li class="active">历史数据</li>
	</ol>
</section>

<section class="content">
	<div class="row">
		<div class="col-md-2" style="padding-left: 5px; padding-right: 5px;">

			<!-- Profile Image -->
			<div class="box box-primary">
				<div class="box-body box-profile">
					<div id="tree"></div>
				</div>
			</div>
		</div>

		<div class="col-md-10">

			<div class="row" style="padding-bottom: 20px;">
				<form id="user-form" name="user-form" class="form-horizontal">
					<div class="box-body">

						<div class="col-md-3">
							<div class="form-group">
								<label for="birthday" class="col-sm-3 control-label">开始时间</label>
								<div class="input-group col-sm-8">
									<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
									<input type="text" class="form-control" data-flag="datetimepicker"
										   data-format="yyyy-mm-dd hh:ii:ss" name="startTime" id="startTime"
										   placeholder="开始时间">
								</div>
							</div>
						</div>
						<div class="col-md-3">
							<div class="form-group">
								<label for="birthday" class="col-sm-3 control-label">结束时间</label>
								<div class="input-group col-sm-8">
									<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
									<input type="text" class="form-control" data-flag="datetimepicker"
										   data-format="yyyy-mm-dd hh:ii:ss" name="endTime" id="endTime"
										   placeholder="结束时间">
								</div>
							</div>
						</div>
						<div class="col-md-6" style="padding-left: 0px;padding-right: 0px;">
							<a class="btn btn-info" href="#component" onclick="dataQuery(1)"><i class="fa fa-cog">&nbsp;查询</i></a>
							<!-- <a class="btn btn-success" href="#tool" onclick="dataQuery(2)"><i class="fa fa-wrench">
								&nbsp;十五分钟</i></a> -->
							<a class="btn btn-success" href="#workflow" onclick="dataQuery(3)"><i class="fa fa-edit">
								&nbsp;半小时</i></a>
							<a class="btn btn-success" href="#workflow" onclick="dataQuery(4)"><i class="fa fa-edit">
								&nbsp;一小时</i></a>
							<a class="btn btn-success" href="#workflow" onclick="dataQuery(5)"><i class="fa fa-edit">
								&nbsp;三小时</i></a>
							<a class="btn btn-success" href="#workflow" onclick="dataQuery(6)"><i class="fa fa-edit">
								&nbsp;六小时</i></a>
							<a class="btn btn-success" href="#workflow" onclick="dataQuery(7)"><i class="fa fa-edit">
								&nbsp;十二小时</i></a>
							<a class="btn btn-success" href="#workflow" onclick="dataQuery(8)"><i class="fa fa-edit">
								&nbsp;一天</i></a>
						</div>
					</div>
				</form>


			</div>


			<div id="charts" class="row" style="margin-left: 2px; margin-right: 5px;">


			</div>

		</div>

	</div>
</section>



<script src="${basePath}/resources/common/libs/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="${basePath}/resources/common/libs/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script>
	var selectNode;
	var currentObj = {
		initTree : function(selectNodeId) {
			var self = this;
			var treeData = null;
			ajaxPost(basePath + "/org/treeData", null, function(data) {
				treeData = data;
			});
			$("#tree").treeview({
				data : treeData,
				showBorder : true,
				expandIcon : "glyphicon glyphicon-stop",
				collapseIcon : "glyphicon glyphicon-unchecked",
				levels : 3,
				onNodeSelected : function(event, data) {
					selectNode = data.id;
					//TODO加载基地数据
					currentObj.loadHistryData(selectNode);
				}
			});
			if (treeData.length == 0)
				return;
			//默认选中第一个节点
			selectNodeId = selectNodeId || 0;
			$("#tree").data('treeview').selectNode(selectNodeId);
			$("#tree").data('treeview').expandNode(selectNodeId);
			$("#tree").data('treeview').revealNode(selectNodeId);
			currentObj.loadHistryData(selectNodeId);
		},
		loadHistryData: function (selectNodeId){
			var innerHtml;
			ajaxPost(basePath + "/data/history/loadData/"+selectNodeId, null, function(data) {
				if(data.success){
					innerHtml = data.data;
				}
			});

			if(innerHtml){
				$("#charts").empty();
				$("#charts").append(innerHtml);
			}

//			var dcode;
//			ajaxPost(basePath + "/device/getCollectDevice/"+selectNodeId, null, function(data) {
//				if(data.success){
//					dcode = data.data;
//				}
//			});
//			if(dcode && dcode.length > 0){
//				var url1 = '${grafanaHost}/dashboard-solo/db/'+dcode+'?orgId=1&from=1521555048710&to=1521555948710&panelId=10&theme=light';
//				var url2 = '${grafanaHost}/dashboard-solo/db/'+dcode+'?orgId=1&from=now-15m&to=now&panelId=11&theme=light&refresh=30s';
//				var url3 = '${grafanaHost}/dashboard-solo/db/'+dcode+'?orgId=1&from=now-15m&to=now&panelId=9&theme=light&refresh=30s';
//				var url4 = '${grafanaHost}/dashboard-solo/db/'+dcode+'?orgId=1&from=now-15m&to=now&panelId=3&theme=light&refresh=30s';
//				var url5 = '${grafanaHost}/dashboard-solo/db/'+dcode+'?orgId=1&from=now-15m&to=now&panelId=1&theme=light&refresh=30s';
//				var url6 = '${grafanaHost}/dashboard-solo/db/'+dcode+'?orgId=1&from=now-15m&to=now&panelId=4&theme=light&refresh=30s';
//				var url7 = '${grafanaHost}/dashboard-solo/db/'+dcode+'?orgId=1&from=now-15m&to=now&panelId=2&theme=light&refresh=30s';
//				var url8 = '${grafanaHost}/dashboard-solo/db/'+dcode+'?orgId=1&from=now-15m&to=now&panelId=7&theme=light&refresh=30s';
//				var url9 = '${grafanaHost}/dashboard-solo/db/'+dcode+'?orgId=1&from=now-15m&to=now&panelId=8&theme=light&refresh=30s';
//				var url10 = '${grafanaHost}/dashboard-solo/db/'+dcode+'?orgId=1&from=now-15m&to=now&panelId=5&theme=light&refresh=30s';
//				var url11 = '${grafanaHost}/dashboard-solo/db/'+dcode+'?orgId=1&from=now-15m&to=now&panelId=6&theme=light&refresh=30s';
//				$("#iframId1").attr('src',url1);
//				$("#iframId2").attr('src',url2);
//				$("#iframId3").attr('src',url3);
//				$("#iframId4").attr('src',url4);
//				$("#iframId5").attr('src',url5);
//				$("#iframId6").attr('src',url6);
//				$("#iframId7").attr('src',url7);
//				$("#iframId8").attr('src',url8);
//				$("#iframId9").attr('src',url9);
//				$("#iframId10").attr('src',url10);
//				$("#iframId11").attr('src',url11);
//			}
		}
	}
	var form;
	$(function() {
		form=$("#user-form").form();
		currentObj.initTree(0);
	})
	
	
	
	
	function dataQuery(dataRange){
		var start;
		var end;
		if(dataRange == 1){//实时查询
			var startTime = $("#startTime").val();
			var endTime = $("#endTime").val();
			if(startTime) {
				var startDate = new Date(startTime+":000");
				start = startDate.getTime();
			}else{
				alert('请选择开始时间');
				return;
			}
			if(endTime){
				var endDate = new Date(endTime+":000");
				end = endDate.getTime();
			}else{
				end = 'now';
			}
		}else if(dataRange == 2){//15分钟
			start = 'now-15m';
			end = 'now';
		}else if(dataRange == 3){//半小时
			start = 'now-30m';
			end = 'now';
		}else if(dataRange == 4){//一小时
			start = 'now-1h';
			end = 'now';
		}else if(dataRange == 5){//三小时
			start = 'now-3h';
			end = 'now';
		}else if(dataRange == 6){//六小时
			start = 'now-6h';
			end = 'now';
		}else if(dataRange == 7){//十二小时
			start = 'now-12h';
			end = 'now';
		}else if(dataRange == 8){//一天
			start = 'now-24h';
			end = 'now';
		}
		
		$("iframe").each(function(index,element){
			var src = $(element).attr("src");
			var startUrl = changeUrlArg(src,'from', start);
			var endUrl = changeUrlArg(startUrl,'to', end);
			var newUrl = endUrl.replace('&refresh=30s','');
			$(element).attr('src',newUrl);
		});
	}
	
	function changeUrlArg(url, arg, val){
	    var pattern = arg+'=([^&]*)';
	    var replaceText = arg+'='+val;
	    return url.match(pattern) ? url.replace(eval('/('+ arg+'=)([^&]*)/gi'), replaceText) : (url.match('[\?]') ? url+'&'+replaceText : url+'?'+replaceText);
	}
	
</script>